<template>
  <a-layout style="min-height: 100vh">
    <!-- collapse事件获取展开收取状态 -->
    <a-layout-sider
      @collapse="collapse"
      v-model:collapsed="collapsed"
      collapsible
    >
      <div class="logo">{{ title }}</div>
      <a-menu
        theme="dark"
        v-model:selectedKeys="selectedKeys"
        v-model:openKeys="openKeys"
        mode="inline"
        select点击二级菜单事件
        @select="selected"
        openChange一级菜单打开事件
        @openChange="openChange"
      >
        <!-- 菜单列表区域,key控制选中 -->
        <a-sub-menu
          @select="selectChange"
          :key="item.id"
          v-for="item in menusList"
        >
          <template #title>
            <span>
              <!-- 导入并注册后使用 -->
              <user-outlined v-if="item.id === 125" />
              <ToolOutlined v-if="item.id === 103" />
              <SkinOutlined v-if="item.id === 101" />
              <ReconciliationOutlined v-if="item.id === 102" />
              <CloudOutlined v-if="item.id === 145" />
              <span>{{ item.authName }}</span>
            </span>
          </template>
          <!-- 二级菜单 -->
          <a-menu-item :key="item.id" v-for="item in item.children">
            <!-- 拼接上/home/ -->
            <router-link :to="'/home/' + item.path">
              {{ item.authName }}
            </router-link>
          </a-menu-item>
        </a-sub-menu>
      </a-menu>
    </a-layout-sider>
    <a-layout>
      <a-layout-header class="header">
        <span style="margin-right: 10px">{{ username }}</span>
        <a-button @click="outLog">退出</a-button>
      </a-layout-header>
      <a-layout-content style="margin: 0 16px">
        <!-- 面包屑区域 -->
        <a-breadcrumb style="margin: 16px 0">
          <a-breadcrumb-item v-for="(item, index) in crumbs" :key="index">
            <!-- 设置路由跳转到home -->
            <router-link :to="index == 'pathOne' ? '/home' : ''">{{
              item
            }}</router-link>
          </a-breadcrumb-item>
        </a-breadcrumb>
        <div
          :style="{ padding: '24px', background: '#fff', minHeight: '360px' }"
        >
          <!-- 切换子组件 -->
          <router-view />
        </div>
      </a-layout-content>
      <a-layout-footer style="text-align: center">
        Ant Design ©2018 Created by Ant UED
      </a-layout-footer>
    </a-layout>
  </a-layout>
</template>
<script>
import { UserOutlined, ToolOutlined, SkinOutlined, ReconciliationOutlined, CloudOutlined } from '@ant-design/icons-vue';
// getCurrentInstance获取当前实例
import { defineComponent, ref, getCurrentInstance, onBeforeMount, toRaw, reactive } from 'vue';
import { message } from 'ant-design-vue';
export default defineComponent({
  components: {
    UserOutlined,
    ToolOutlined,
    SkinOutlined,
    ReconciliationOutlined,
    CloudOutlined
  },
  setup () {
    // 用户名不需要响应式
    const username = window.sessionStorage.username
    const { proxy } = getCurrentInstance()
    const title = ref('XXX后台管理系统')

    // 控制菜单选中openKeys一级selectedKeys二级
    const selectedKeys = ref([window.sessionStorage.selectedKeys - 0])
    const openKeys = ref([window.sessionStorage.openKeys - 0])
    const collapsed = ref(false)
    const collapse = collapsed => {
      // 判断collapsed侧边栏状态
      if (collapsed) {
        title.value = 'XXX'
      } else {
        setTimeout(() => {
          title.value = '欢迎使用XXX后台管理'
        }, 100)
      }
    }
    const outLog = () => {
      // window.sessionStorage.removeItem('token')
      window.sessionStorage.token = ''
      // 使用提示框
      message.success('退出成功')
      // 使用代理上的路由跳转
      proxy.$router.push('/login')
    }
    // 定义列表变量
    const menusList = ref()
    // 生命周期挂载前
    onBeforeMount(async () => {
      // 请求数据需要携带token，请求拦截器中设置请求头
      // 得易于请求拦截器，数据变得小巧
      const { data } = await proxy.$http.get('menus')
      menusList.value = data
    })
    const selectChange = (value) => {
      console.log(111111);
      console.log(value);
    }
    // 点击二级菜单触发，得到openKeys与selectedkeys的值
    const selected = ({ keyPath }) => {
      window.sessionStorage.selectedKeys = keyPath[1]
      window.sessionStorage.openKeys = keyPath[0]
    }
    // 一级菜单不能同时打开多个
    const openChange = (arr) => {
      // 截取最新打开的一级菜单
      openKeys.value = [arr[arr.length - 1]]
    }
    // 面包屑导航一级二级路径
    const crumbs = reactive({
      pathOne: 'home',
      pathTwo: window.sessionStorage.pathTwo
    })
    // 后置路由守卫，回退菜单响应变化功能(修改选中菜单，面包屑)
    proxy.$router.afterEach((to, drom) => {
      // 获取路由地址
      const pathArr = to.path.split('/')
      console.log(pathArr);
      const pathObj = {}
      if (pathArr.length === 2) {
        // 父亲
        pathObj.fatherPath = pathArr[1]
        // 面包屑无第二级时，清空
        window.sessionStorage.pathTwo = ''
        crumbs.pathTwo = ''
      } else {
        // 父亲孩子
        pathObj.fatherPath = pathArr[1]
        pathObj.sonPath = pathArr[2]
        // 面包屑有第二级时，保存到本地一份，刷新时读取
        window.sessionStorage.pathTwo = pathArr[2]
        crumbs.pathTwo = pathArr[2]

      }
      // 响应式数据不容易操作使用toRaw获得非响应式数据
      const data = toRaw(menusList.value)
      // 判断有无二级菜单
      if (pathObj.sonPath) {
        data.some(val => {
          val.children.forEach(item => {
            if (item.path == pathObj.sonPath) {
              // 注意数据类型，数组
              selectedKeys.value = [item.id]
              window.sessionStorage.selectedKeys = item.id
              openKeys.value = [val.id]
              window.sessionStorage.openKeys = val.id
              return true
            }
          })
        })
      } else {
        selectedKeys.value = []
        openKeys.value = []
        window.sessionStorage.openKeys = ''
        window.sessionStorage.selectedKeys = ''
      }
    })
    return {
      username,
      title,
      menusList,
      collapsed,
      openKeys,
      selectedKeys,
      collapse,
      outLog,
      selectChange,
      selected,
      openChange,
      crumbs
    }
  }
});
</script>
<style scoped>
.logo {
  height: 32px;
  margin: 16px;
  background: rgba(255, 255, 255, 0.3);
  color: #fff;
  text-align: center;
  line-height: 32px;
}
.header {
  text-align: right;
  background: #fff;
  padding-right: 10px;
}
.site-layout .site-layout-background {
  background: #fff;
}
[data-theme="dark"] .site-layout .site-layout-background {
  background: #141414;
}
</style>
